<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body,p{margin: 0;}
    .parent{
        overflow: hidden;
    }
    .left,.centerWrap,.right{
        float: left;
        width: 50%;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .center{
        margin: 0 20px;
    }
    .left,.right{
        width: 25%;
    }
    </style>
</head>
<body>
  <div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="centerWrap">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>v
        </div>         
    </div>
         
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>        
</div>

  <script>

    function fn () {
      var num = 10
      function s () {
        console.log(num)
      }
      s()
    }
    fn()
  </script>
</body>
</html>